<template>
	<view class="content">
		<u-navbar title="我的卡券" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<view class="tab">
			<view @click="change(0)" :class="['tab-item',tabIndex ==0?'active':'']">
				<text>未使用</text>
			</view>
			<view @click="change(1)" :class="['tab-item',tabIndex ==1?'active':'']">
				<text>已使用</text>
			</view>
		</view>
		<view class="discount_content">
			<template v-for="(item,index) in couponList">
				<view class="discount_item" :key="index">
					<discount-coupon @getCou='selectCoupon' :item="item" :index='index' get_status='0'></discount-coupon>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getUserCouponList,
		getCouponInfo
	} from '../../../api/mine.js'
	export default {
		onLoad(option) {
			this.select = option.select
		},
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				tabIndex: 0,
				couponList: [],
				alreadyCoupon: [],
				notCoupon: [],
				select: 0
			}
		},
		created() {
			this.getCouponListData()
			this.change(0)
		},
		methods: {
			selectCoupon(data) {
				console.log(data);
				if (this.select == 1) {
					const coupon = this.notCoupon.find((item) => {
						console.log(item);
						return item.id == data.id
					})
					console.log(coupon);
					if (coupon.verificationCode) {
						uni.showToast({
							title: '商品券不能参与优惠',
							icon: 'none'
						})
						return
					}
					this.$store.commit('setCouponId', data.id)
					uni.navigateBack()
					return
				}
				if (this.couponList[data.index].verificationCode) {
					uni.navigateTo({
						url: '/pages_goods/coupon-detail/coupon-detail?id=' + data.id
					})
				} else {
					this.$store.commit('setTabValue', 0)
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			async getCouponListData() {
				const res = await getUserCouponList()

				console.log(res);
				res.rows.forEach(item => {
					if (item.status == 2) {
						// console.log(item);
						// if (this.select == 1 && item.verificationCode == null) {
						// this.alreadyCoupon.push(item)
						// return
						// }
						this.alreadyCoupon.push(item)
					} else {
						this.notCoupon.push(item)
					}
				})
			},
			change(index) {
				this.tabIndex = index
				if (this.tabIndex == 0) {
					this.couponList = this.notCoupon
				} else {
					this.couponList = this.alreadyCoupon
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;

		.tab {
			display: flex;
			background-color: #fff;
			margin-bottom: 20rpx;

			.tab-item {
				// width: 375rpx;
				flex: 1;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				position: relative;
				color: #333332;
				font-size: 26rpx;

				text {
					display: inline-block;
					width: 100%;
				}

				&.active {
					color: #FF594D;
				}

				&.active::after {
					content: "";
					position: absolute;
					height: 2rpx;
					width: 375rpx;
					background-color: #FF594D;
					bottom: 0;
					left: 0;
				}
			}
		}

		.discount_content {
			background-color: #fff;
			padding: 10rpx 28rpx 30rpx;

			.discount_item {
				margin-top: 20rpx;
			}
		}

	}
</style>